<template>
  <div v-if="isShowRef" class="right-drawer"
    :style="{ backgroundColor: 'var(--el-cupks-win-bg-color)', width: drawerWidthRef }">
    <ai_view :resizeHandle="resizeHandle" :get-text-handle="getTextHandle"
      :appkyes="['TRANSLATE', 'SUMMARIZE', 'ABSTRACT']"></ai_view>
  </div>
  <div class="toggle-button" v-if="!isShowRef">
    <img @click="isShowRef = true" src="/icon/AI.png" alt="AI Icon">
  </div>
  <div class="toggle-button-close" v-if="isShowRef" :style="' right:' + closeButtonWidthRef">
    <img @click="isShowRef = false" src="/icon/AI.png" alt="AI Icon">
  </div>
</template>
<script setup lang="ts">
import ai_view from '../know_creat/components/ai_view.vue';
import { ref } from 'vue';
const drawerWidthRef = ref('400px');
const closeButtonWidthRef = ref('440px');
const props = defineProps({
  html: {
    type: String,
    required: true,
  }
});

const isShowRef = ref(false);

const getTextHandle = () => {
  return props.html;
}

const resizeHandle = (size: string) => {
  drawerWidthRef.value = size;
  if (size == '400px') {
    closeButtonWidthRef.value = '440px';
  } else {
    closeButtonWidthRef.value = '690px';
  }
}



</script>
<style scoped>
/* 样式可以根据需要添加 */

.right-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 400px;
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 25px rgba(0, 0, 0, 0.3); /* 更大的模糊半径和更深的颜色 */
  z-index: 999;
  /* 确保在其他内容之上 */
}


.toggle-button {
  position: fixed;
  top: calc(100vh - 110px);
  right: 20px;
  width: 50px;
  height: 40px;
  z-index: 1000;
  opacity: 0.3;

  /* 确保按钮在抽屉层之上 */
  img {
    width: 48px;
    height: 48px;
    cursor: pointer;
    margin-right: 8px;
  }
}

.toggle-button-close {
  position: fixed;
  top: calc(100vh - 110px);
  width: 30px;
  height: 40px;
  z-index: 1000;
  opacity: 0.5;

  /* 确保按钮在抽屉层之上 */
  img {
    width: 48px;
    height: 48px;
    cursor: pointer;
    margin-right: 8px;
  }
}

.toggle-button-close:hover {
  opacity: 1;
}

.toggle-button:hover {
  opacity: 1;
}
</style>
